<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>积分兑换商城首页触屏版html5</title>
    <link rel="stylesheet" type="text/css" href="/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/css/cation.css"/>
    <link rel="stylesheet" type="text/css" href="/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/loading.css"/>
    <script src="/js/rem.js"></script>
	<!--<script src="/js/jquery/jquery.min.js"></script>-->
    <script src="/js/jquery.min.js" type="text/javascript"></script>
	<script src="/js/bootstrap/js/bootstrap.min.js"></script>
	<script src="/js/plugins/jrender/jrender.js"></script>
	<link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
	<script src="/js/plugins/dialog/dialog.min.js"></script>
	<script src="/js/common.js"></script>
	<script type="text/javascript">
		$(window).on('load',function(){
			$(".loading").addClass("loader-chanage")
			$(".loading").fadeOut(300)
		})
		var currentPage = 1;//当前页
		var pages; //总页数
		var types; //当前页分类


		$(function () {
			//发请求查商品分类信息
			$.get("/products/productTypes",{currentPage: currentPage},function (data) {
                //console.log(data);
                renderView(data);
                //返回的data是pageInfo对象,内部包含了分页需要用到的数据
                pages = data.pages;
                types = data.list;
			});

			//当屏幕滚到底部
			$(window).scroll(function () {
				//判断是否到底
				if (isEnd()){
				    //判断是否有下一页
					if (currentPage<pages){
					    currentPage++;
					    $.get("/products/productTypes",{currentPage: currentPage},function (data) {
                            console.log(data);
                            $.merge(types,data.list);
							renderView({list:types});
                        },"json");
					} else {
                        $(document).dialog({
                            type : "notice",
                            infoText: "已经到底部了",
                            autoClose: 1500,
                            position: "bottom"
                        });

					}
				}
            });
        });

        //渲染界面
        function renderView(data) {
            $(".types").renderValues(data, {
                //属性名就是函数的名称
                handle: function (ele, value) {
                    //动态渲染a标签
                    $(ele).attr("href", "/mine/shopping/list.html?typeId="+value);
                }
            });
        }
	</script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
	<body>
		<!--头部区域-->
	    <header class="mui-bar mui-bar-nav" style="background-color: #4D4C4B" id="header">
			<a class="btn" href="javascript:history.go(-1)">
	            <i class="iconfont icon-fanhui"></i>
	        </a>
	        <h4>商品分类</h4>
	        <a class="btn" href="#">
	            <i class="iconfont icon-erweima"></i>
	        </a>
	    </header>
	    <!--头部区域结束-->

	    <div class="warp clearfloat types">
		    <div class="cations clearfloat" render-loop="list" >
		    	<div class="list clearfloat fl">
		    		<a href="list.html" render-key="list.id" render-fun="handle" >
			    		<p class="tit over box-s" render-html="list.typeName"></p>
			    		<div class="tu">
			    			<img render-src="list.typeUrl" />
			    		</div>
		    		</a>
		    	</div>

		    </div>
	    </div>
	    
	    <!--尾部区域-->
	    <footer class="page-footer fixed-footer" id="footer">
			<ul>
				<li>
					<a href="shopindex.html">
						<i class="iconfont icon-shouye"></i>
						<p>首页</p>
					</a>
				</li>
				<li class="active">
					<a href="cation.html">
						<i class="iconfont icon-icon04"></i>
						<p>分类</p>
					</a>
				</li>
				<li>
					<a href="shopcar.html">
						<i class="iconfont icon-gouwuche"></i>
						<p>购物车</p>
					</a>
				</li>
				<li>
					<a href="center.html">
						<i class="iconfont icon-yonghuming"></i>
						<p>我的</p>
					</a>
				</li>
			</ul>
		</footer>
	</body>
	
</html>
